<template>
  <div>
    <h1>{{ msg }}</h1>
    <!-- 直接从state数据对象中取count键值 -->
    <h1>从state中获取数据{{ $store.state.count }}</h1>
    <!-- 调用getters中有返回值的函数getCount来获取当前state中的值 -->
    <h1>从getter上获取数据{{ $store.getters.getCount }}</h1>
    <!-- <h1>从mapState上获取数据{{ count1 }}</h1> -->
    <h1>从mapState上获取数据{{ count }}</h1>
    <h1>从mapGetters上获取数据{{ getCount }}</h1>
    <!-- <button @click="add">+</button> -->
    <button @click="addCount(1)">+</button>
    <!-- <button @click="decrease">-</button> -->
    <button @click="getDel(1)">-</button>
  </div>
</template>
<script>
/* 用于更改操作的页面
1.简化：this.$store.state  this.$store.commit this.$store.getters this.$store.dispatch书写起来很长，vuex包内封装了一套简化对象
 mapState mapGetters mapMutations mapActions 配合计算属性+扩展运算符
参考文章：https://zhuanlan.zhihu.com/p/100941659
参考文章：vue 6种通信方式https://blog.fundebug.com/2019/05/18/6-ways-for-vue-communication/
2.mapState和mapGetter要放在计算属性computed中，方便响应式。仍而...mapMutations和...mapActions要放在methods方法中
*/
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
// import { mapState, mapGetters } from 'vuex';
// import { mapState } from 'vuex';

export default {
  data() {
    return {
      msg: '这是hello页面',
      // count: 0,
      isShow: this.$store.getters.show
    };
  },
  methods: {
    // addCount() {
    //   // this.$store.commit('addCount', 1);
    //   // 采用actions先提交到mutations,再使用mutations进行操作
    //   this.$store.dispatch('getAddCount', 1);
    //   // dispatch分发action,传递多个参数参数的两种方式：
    //   // 参考博文： https://www.jianshu.com/p/894d9878aa77
    //   // 1、方式1常见方式
    //   // this.$store.dispatch('getAddCount', {
    //   //   key1: val1,
    //   //   key2: val2
    //   // });
    //   // 2、对象方式，type:'传递的actions方法名'
    //   // this.$store.dispatch({
    //   //   type:'getAddCount',
    //   //   key1:val1,
    //   //   key2:val2
    //   // });
    // },

    // addCount方法简化为下面
    ...mapMutations(['addCount']),
    /* 上面等价于,如果传值在addCount点击事件处传值
    addCount(prop){
      this.$store.commit('addCount',prop);
    } */
    // decrease() {
    //   // this.$store.commit('del', 1);
    //   // 原理类似add方法
    //   this.$store.dispatch('getDel', 1);
    // }
    ...mapActions(['getDel'])
    /* 等价于
    getDel(prop){
      this.$store.dispatch('getDel',prop);
    } */
  },
  computed: {
    // computed是不能传参的
    // count1和数组元素 getCount都可以当做类似data props一样的数据，在模板中渲染了
    // 语法:当有其他自定义属性时，需要加上展开运算符 ...   本项目计算属性computed中，不仅定义了mapState还有mapGetters
    // ...mapState({key1:value1,……})
    // 第一种写法：箭头函数的返回值的写法
    // ...mapState({
    //   count1: state => state.count
    // }),
    // 第二种写法，第一种的简化
    // ...mapState({ count1: 'count' }),
    // 第三种简化方式
    /* 下面代码等价于
    count(){
      return this.$store.state.count;
    }
    
    */
    ...mapState(['count']),
    // 语法：
    // ...mapGetters(['getters中的方法名1',……])
    ...mapGetters(['getCount'])
    /*
    等价于下面的代码
    getCount() {
      return this.$store.getters.getCount;
    }
    */
  }
};
</script>
<style lang="less" scoped>
button {
  width: 100px;
  margin: 20px 40px;
}
</style>
